<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta content='' name='description'>
<meta content='True' name='HandheldFriendly'>
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
<title>修改头像</title>
<jsp:include page="/public/header-meta.jsp"></jsp:include>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.upload.js"></script>
</head>
<body>

<jsp:include page="/public/header.jsp"></jsp:include>
<div id="alt"></div>
<div id="wrap">
<div class="container" id="page-main">
<div class="row">
<div class='col-xs-12 col-sm-6 col-md-8' class="clearfix">
<div class='box'>
<div class='cell' style="border-bottom-style: none;">
<a href="" class="startbbs">${bbsUser.uname}</a> <span class="chevron">&nbsp;›&nbsp;</span> 设置
    <ul class="nav nav-tabs" style="margin-top:10px;">
    <li>
    <a href="user!setProfile?uid=${user.uid}">个人信息</a>
    </li>
    <li class="active"><a href="#">头像</a></li>
    <li><a href="user!setPsw?uid=${user.uid}">修改密码</a></li>
    </ul>
</div>
	<div class="inner">
		<form class="form-horizontal" enctype="multipart/form-data" action="user!upAvatar" method="post" name="form">
		<input type="hidden" name="uid" value="${list[0].uid}">
  			<fieldset>
    			<div class="form-group">
      				<label class="col-sm-3 control-label">当前头像</label>
      				<div class="col-sm-8">
      					<p>
      					<c:if test="${user.avatar !=null}">
      						<img class="large_avatar" src="${user.avatar }"/>
      						<img class="middle_avatar" src="${user.avatar } "/>
      						<img class="small_avatar" src="${user.avatar } "/>
      					</c:if>
      					<c:if test="${user.avatar == null}">
      						<img class="large_avatar" src="images/noavatar_middle.gif"/>
      						<img class="middle_avatar" src="images/noavatar_middle.gif"/>
      						<img class="small_avatar" src="images/noavatar_middle.gif "/>
      					</c:if>
      					</p>
      					
       					<p class="alert alert-info">
       						<strong>注意</strong>    用户名：${bbsUser.uid}<br>
       						支持 500k 以内的 PNG / GIF / JPG 图片文件作为头像，推荐使用正方形的图片以获得最佳效果。
	      				</p>
      				</div>
    			</div>
    			
    			<div class="form-group">
      				<label class="col-sm-3 control-label" for="avatar_file">选择图片</label>
      				<div class="col-sm-5">
       					<input type="file" id="file_upload" name="file" />
      				</div>
    			</div>
	    			<div class="col-sm-offset-3 col-sm-9">
    				<button type="submit"  class="btn btn-sm btn-primary">上传新头像</button>
    				<a class="btn btn-primary" data-toggle="modal" href='#choosefile'>Trigger modal</a>
    				</div>
    			</div>
    		</fieldset>
    	</form>
	</div>
	
</div>
</div>
<script type="text/javascript" src="common/js/jquery.fileupload.js"></script>
<script type="text/javascript" src="common/js/jquery.imgareaselect.js"></script>

<!-- 设置头像弹出层 -->
<div class="modal fade" id="choosefile">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="registerModalLabel">图片裁剪</h4>
      </div>
      <div class="modal-body">
      <div id="upload-pane">

                    <div class="tx-div">
                            <div class="frame-photo">
                                <img id="photo" src="${user.avatar }">
                            </div>
                            <span class="solid-d"></span>
                            <div id="preview">
                                <img id="cut-photo" src="${user.avatar }">
                                <form method="post">
                                        <input type="hidden" id="startX" name="startX" readonly="readonly">
                                        <input type="hidden" id="startY" name="startY" readonly="readonly"><br>
                                        <input type="hidden" id="width" name="width" readonly="readonly">
                                        <input type="hidden" id="height" name="height" readonly="readonly">
                                </form>
                            </div>
                        </div>
                <div class="btn-box-cutimg">
                        <span class="btn btn-primary">
                            <span>选择头像</span>
                            <input id="file_upload" type="file" name="Filedata">
                        </span>
                    <button type="button" class="btn btn-lg btn-primary btn-block" onclick="avatar_crop()">保存</button>
                </div>
            </div>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class='col-xs-12 col-sm-6 col-md-4' id='Rightbar'>

</div>
</div></div></div>
<jsp:include page="/public/footer.jsp"></jsp:include>